<template>
  <div>
    <!-- <input type="text" v-model="name"> -->

    <!-- <div>姓名{{ name }}</div> -->

    <!-- <div v-html="message"></div> -->

    <!-- <input type="text" v-bind:placeholder="username">
    <br>
    <input type="password" v-bind:placeholder="pwd">
     -->

     <!-- <button @click="submit">提交</button>
    <br> -->
     <!-- <input type="text" v-model.number="n1">+
     <input type="text" v-model.number="n2"> = {{ n1 + n2 }} -->

     <!-- <input type="text" v-model="n1">+
     <input type="text" v-model="n2"> = {{ n1 + n2 }} -->
    
     <!-- 小明的学习等级：
     <p v-if="type === 'A'">
        优秀
     </p>
     <p v-else-if="type === 'B'">
        良好
     </p>
     <p v-else>
        差
     </p>

     <button @click = "type='A'  ">切换成优秀</button>
     <button @click = "type='B'  ">切换成良好</button>
     <button @click = "type='C'  ">切换成差</button> -->
 
    <p v-if="flag">通过v-if控制的元素</p>

    <p v-show="flag">通过v-show控制的元素</p>

    <button @click = "flag=!flag">显示/隐藏</button>
 

    <div v-for="(item,index) in list">
      索引是：{{ index }}--内容是：{{ item }}
      </div>

    <div v-for="(value,name) in user">
      属性名：{{ name }}--属性值：{{ value }}
    </div>

    <div>
      count的值：{{ count }}
    </div>
    <button @click="addcount">
        count++
    </button>

    <p>初始mess {{ mess }}</p>
    <p>反转之后的mess {{ reversmess }}</p>
    <button @click = 'updateMess'>更改</button>
 </div>
</template>

<style>

</style>

<script setup>

import {reactive, ref, computed} from 'vue'

const name = ref('LongSir')

const message = ref('<span>123456 </span>')

const username = ref('请输入用户名')
const pwd = ref('请输入密码')


const submit = ()=>{
alert('提交成功')
}

const n1 =ref(1)
const n2 =ref(2)

const type = ref('B')

const flag = ref(true)

const list = reactive(['HTML','CSS','JavaScript'])

const user = reactive({id:11,name:'小明',gender:'男'})
const count=ref(1)
const addcount = event=>{
  count.value++
  if(count.value%2===0){
    event.target.style.border = '3px dotted'
  }
  else{
    event.target.style.border = '3px solid'
  }
}

const mess = ref('hello world')
const reversmess = computed(()=>
  mess.value.split('').reverse().join('')
)

const updateMess =()=>{
  mess.value='hello'
}
</script>